<!--
 * @Author: Mcc
 * @Date: 2024-07-10 10:05:02
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-23 11:55:35
 * @FilePath: \ft-apply\src\view\UserCenter.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <van-popup v-model:show="props.showUserCenter" class="popup" position="bottom"
    :style="{ width: '100%', paddingBottom: '20px', borderRadius: '20px 20px 0 0' }"
    @click-close-icon="onClickCloseIcon" closeable @click-overlay="onClickOverlay">
    <div class="pop-logo">
      <div class="userContent">
        <img src="../assets/img/user.png" alt="" />

        <span> 你好~<br />{{ store.userInfo?.phone }}</span>
      </div>
    </div>
    <div style="padding: 20px 15px;">
      <div class="user-info-content">
        <div :class="['func-item', item.status == 0 ? 'none' : '']" v-for="item in funcList" @click="toPath(item)">
          <span :class="item.url" style="font-size: 30px;"></span>
          <div>
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="user-info">
      <van-button type="default" @click="logoutBtn">退出登录</van-button>
    </div>
    <!-- <van-sidebar v-model="active" style="width: 100%">
      <van-sidebar-item @click="toPath(item)" :title="item.title" v-for="item in list" :key="item.title">
      </van-sidebar-item>
    </van-sidebar> -->
  </van-popup>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
import { showConfirmDialog, showToast } from 'vant';
import { useRouter } from 'vue-router';
import { useStore } from '../store';
import { routes } from '../router/index';

const store = useStore();
const router = useRouter();
const props = defineProps(['showUserCenter']);
const emit = defineEmits(['closePop']);
const active = ref<string | number>(0);

const list = ref<any>(JSON.parse(JSON.stringify(routes)));


import apis from '../api/index';
const { userIndexStatus } = apis;
const clickStatus = ref();
const getClick = async () => {
  if (store.userInfo?.userId) {
    const response: any = await userIndexStatus({ userId: store.userInfo?.userId });
    if (response.code != '10000') {
      showToast(response.msg);
      localStorage.clear();
      sessionStorage.clear()
      emit('closePop');
      store.$patch({
        userInfo: {},
        hasLogin: false,
      });
    } else {
      store.$patch({
        clickStatus: response.data
      })
      localStorage.setItem("clickStatus", JSON.stringify(response.data) as string);
    }
  }
}
const funcList = ref<FuncItem[]>([
  {
    label: '应聘进度',
    url: 'iconfont icon-yingpinjindu2',
    path: '/Progress',
    status: -1
  },
  {
    label: '参培确认',
    url: 'iconfont icon-canpeiqueren1',
    path: '/SureJoin',
    status: 1
  },
  {
    label: '志愿选择',
    url: 'iconfont icon-zhiyuanxuanze',
    path: '/VolChoice',
    status: 2
  },
]);
watch(() => store.userInfo, (val) => {
  if (val) {
    getClick();
  }
}, { deep: true, immediate: true });

watch(() => store.clickStatus, (val) => {
  if (val) {
    funcList.value[1].status = val.trainingStatus;
    funcList.value[2].status = val.volunteerStatus;
  }
}, { deep: true, immediate: true });
onMounted(() => {
  getClick();
})
list.value.push({
  path: '/logout',
  name: 'logout',
  title: '退出登录',
});
interface FuncItem {
  label: string;
  url: string;
  path: string;
  status: any;
}


const doLogOut = async () => {
  const res = await showConfirmDialog({
    title: '退出',
    message: '将要退出，请确认！',
  });
  if (res) confirmLogOut();
};

const confirmLogOut = () => {
  localStorage.clear();
  sessionStorage.clear()
  emit('closePop');
  store.$patch({
    userInfo: {},
    hasLogin: false,
  });
  router.push('/login');
};

const onClickCloseIcon = () => {
  emit('closePop');
};
const onClickOverlay = () => {
  emit('closePop');
};
const logoutBtn = () => {
  doLogOut();
};

const toPath = (item: any) => {
  if (store.userInfo != null) {
    if (store.clickStatus == null) {
      showToast('系统维护中！');
      return;
    }
    //登录状态判定
    if (item.status != null) {
      emit('closePop');
      //志愿选择提交的时候，点击直接进入志愿选择结果页
      if (item.label == '参培确认') {
        //1需要填写参培阶段
        if (item.status == 1) {
          router.push(item.pach)
          //router.push("/train/agreement")
        } else if (item.status == 2) {
          //2已填写参培跳到参培首页
          router.push("/train/index")
        } else {
          showToast('暂未开放~');
        }
      } else if (item.label == '志愿选择') {
        //判定状态码跳转对应的页面
        if (item.status == 1) {
          router.push(item.pach);
        } else if (item.status == 2) {
          router.push({
            path: '/delivered',
            query: {
              identifier: 'contract',
            },
          });
        } else {
          showToast('暂未开放~');
        }
      } else {
        router.push("/Progress")
      }
    }
    // else if(item.status == 0){
    //   showToast('等待通过！');
    // }

  } else {
    localStorage.setItem("loginUrl", item.pach)
    showToast('请先登录');
    router.push('/login')
  }
};
</script>

<style lang="less" scoped>
.van-popup {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FB 51%);
}

.van-button {
  background: rgba(191, 202, 208, 0.3);
}

:deep(.van-sidebar-item) {
  padding-left: 20px;
  box-sizing: border-box;
}

.pop-logo {
  padding-top: 20px;
  padding-left: 20px;

  .userContent {
    display: flex;
    align-items: center;
  }

  span {
    font-weight: bold;
    line-height: 24px;
  }

  img {
    height: 60px;
    margin-right: 10px;
  }
}

.user-info {
  display: flex;
  align-items: center;
  margin-left: 20px;
  font-size: 18px;
  justify-content: space-around;
  padding: 0 15px 0 0;
  font-weight: bold;

  button {
    width: 100%;
  }

  img {
    width: 26px;
    margin-right: 15px;
  }
}

.user-info-content {
  display: flex;
  justify-content: space-around;
  height: 55px;
  align-items: center;
  //background: #ffffff;
  border-radius: 20px 20px 20px 20px;

  .func-item {
    width: 100px;
    height: 70px;
    border-radius: 14px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    gap: 10px;
    font-size: 26rpx;
    font-weight: normal;
    line-height: 18px;
    letter-spacing: 0px;
    background: #ffffff;

    .iconfont {
      font-size: 24px !important;
    }
  }

  .none {
    //background-color: rgba(32, 158, 228, 0.1);
    color: #A9C7D8;
  }
}
</style>
